<template>
    <div>
        <div class="" v-loading="isloading">
            <div class="relative overflow-hidden" :style="{ height: 'calc(378px)', width: 'calc(100%)' }">
                <clickMap class="pt-[10px] h-[368px]" v-if="active == 1" ref="clickMapRef" :key="markey"
                    :markerArr="data" :bgImg="bgImg" :editAble="false" :isShowPopup="false" />
                <mapForm v-if="active == 2" :height="368" ref="mapFormRef" :key="markey" :labelMarkers="mapdata"
                    :image="image" :bounds="bounds" :isEdit="false" />
                <div
                  class="absolute top-[20px]  right-[20px] flex bg-[rgba(11,33,77,.8)] rounded-[4px] z-[10] cursor-pointer text-[#9DA7BC]">
                  <div :class="`p-[10px] rounded-l-[4px] ${active == 1 ? 'bg-[#2F5DBA] text-[#fff]' : ''}`"
                    @click="checkmodle(1)">平面模式</div>
                  <div :class="`p-[10px] rounded-r-[4px] ${active == 2 ? 'bg-[#2F5DBA] text-[#fff]' : ''}`"
                    @click="checkmodle(2)">地图模式</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import clickMap from '@/components/clickMap/marker.vue'
import mapForm from '@/components/mapForm/map.vue'
import { projectsetting } from "@/api/screen/screenmune"
import { getDrawingInfo } from '@/api/screen';
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook();
const props = defineProps({
    alarmInfo: {
        type: Object,
        default: {}
    }
})
onMounted(() => {
    // setTimeout(() => {
    //     console.log(props.alarmInfo, 'alarmInfo')

    // }, 1000);
    isloading.value = false
})
watch(() => props.alarmInfo, (newValue, oldValue) => {
    setTimeout(() => {
        setmapdata()
    }, 300);
}, { immediate: true })
const active = ref(1)
const markey = ref(0)
const data = ref([])
const mapdata = ref([])
const isloading = ref(true)
const bgImg = ref(null)
const image = ref()
const bounds = ref()
const checkmodle = (e) => {
    active.value = e
}
function setmapdata() {
    if (props.alarmInfo.position == 1) {
        getDrawingInfo({
            buildingId: props?.alarmInfo?.buildingId,
            drawingId: props?.alarmInfo?.drawingId,
        }).then(res1 => {
            bgImg.value = res1.result.drawingInfo.img
            data.value = [props.alarmInfo.drawingPoint]
            markey.value++
            // useDataDashboardThemeStore.building.drawingInfo = res1.result
            // useDataDashboardThemeStore.building.checkedDrawingId = item.drawingId
            // useDataDashboardThemeStore.drawmapid = item.drawingId
        })
    } else if (props.alarmInfo.position == 2) {
        projectsetting({ projectId: props.alarmInfo.projectId }).then(res => {
        image.value=res.result.projectPlan
        bounds.value = res.result.bounds
        if(props.alarmInfo?.markPoint?.lat!==''){
            mapdata.value = [props?.alarmInfo?.markPoint]
        }
        // if (props.alarmInfo?.drawingPoint?.lat !== '') {
        //     data.value = [props?.alarmInfo?.drawingPoint]
        // }
        bgImg.value = useDataDashboardThemeStore.GET_SETTING("projectInfo").projectPlan
        markey.value++
    })

    }
}
</script>
<style lang="scss" scoped>
.borderl {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.borderr {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
</style>
